<template>
  <div class="configurationdiv">
    <div class="tongyongdiv" v-if="iftongyong">
      <!-- 左上角快捷菜单显示 -->
      <div style="position: absolute; z-index: 10" class="switchbtn fwwcc">
        <el-checkbox v-model="erchecked">二维</el-checkbox>
        <el-checkbox v-model="sanchecked">三维</el-checkbox>
        <el-checkbox v-model="iffps">FPS显示</el-checkbox>
        <icon-svg
          icon-class="zhihuan"
          :color="'#fff3'"
          :width="'30px'"
          :height="'30px'"
          style="cursor: pointer"
        ></icon-svg>
      </div>
      <!-- 三维cesium底图 -->
      <div class="threediv" v-if="sanchecked">
        <ThreeDimensional />
      </div>
      <!-- 二维元素 -->
      <div class="twodiv" v-if="erchecked">
        <TwoDimensional />
      </div>
    </div>
  </div>
</template>
<script>
import TwoDimensional from "./TwoDimensional";
import ThreeDimensional from "./ThreeDimensional";
// import worker from "workerize-loader!./test.worker.js";
import Cookies from 'js-cookie'

import zztoken from "./token/zztoken.js";

export default {
  components: {
    ThreeDimensional,
    TwoDimensional,
  },
  data() {
    return {
      //home动态元素相关
      setting: {},
      erchecked: true,
      // erchecked: false,
      sanchecked: true,
      // sanchecked: false,
      iffps: false,
      iftongyong: true,
    };
  },
  computed: {},
  created() {
    //设置全局缩放比
    this.$store.state.daping.scale =
      document.documentElement.clientWidth / 1920;
    //根据路由设置全局项目名称
    this.$store.state.daping.type = this.$route.meta.name;
    Cookies.set("dptype", this.$route.meta.name)

    //判断三维场景是否显示
    if (
      this.$store.state.daping.type == "zhengzhoubanping1" ||
      this.$store.state.daping.type == "zhengzhoubanping2"
    ) {
      this.sanchecked = false;
      // this.sanchecked = false;
    }

    //判断二维场景是否显示
    let type = localStorage.getItem("showtypetwo");
    if (!type) {
      this.erchecked = true;
    } else {
      if (type == "true") {
        this.erchecked = true;
      } else {
        this.erchecked = false;
      }
    }
  },
  watch: {
    erchecked: {
      handler: function (n, o) {
        if (n) {
          localStorage.setItem("showtypetwo", "true");
        } else {
          localStorage.setItem("showtypetwo", "false");
        }
      },
    },
    iffps: {
      handler: function (n, o) {
        this.$store.state.daping.iffps = n;
      },
    },
  },
  mounted() {
    // let instance = worker(); // `new` is optional

    // instance.expensive(1000).then((count) => {
      //   console.log(`Ran ${count} loops`);
    // });

    this.$root.setting.scale = document.documentElement.clientWidth / 6656;
    let _this = this;
    // window.onresize = () => {
      //   return (() => {
        //     // 可以在这里保存到浏览器中，也可以保存到其他地方
    //     // window.height = document.documentElement.clientHeight;
    //     // _this.height = window.height;
    //     _this.$root.setting.scale = document.documentElement.clientHeight;
    //   })();
    // };

    // if (this.$route.name == "zhengzhou") {
      //   this.iftongyong = false;
    //   zztoken().then((res) => {
      //     this.iftongyong = true;
    //   });
    // }
  },
  methods: {},
};
</script>
<style lang='scss'>
.switchbtn {
  left: -243px;
  transition: all 0.5s;
}

.switchbtn:hover {
  left: 0px;
}

html {
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
  // box-sizing: content-box;
}

.configurationdiv {
  .threediv {
    height: calc(100vh);
    width: calc(100vw);
    z-index: 1;
  }

  .twodiv {
    position: absolute;
    pointer-events: none;
    height: calc(100vh - 0px);
    width: calc(100vw);
    top: 0px;
    z-index: 2;
  }
}
</style>